<template>
  <div class="home">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="auto">
        <div class="logo"></div>
        <el-menu
          default-active="2"
          :collapse="isCollapse"
          class="el-menu-admin"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">用户列表</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>

        <!-- header部分 -->
        <el-header>
          <i class="myicon myicon-menu toggle-btn" @click="toggleCollapse"></i>
          <div class="system-title">电商后台管理系统</div>
          <div>
            <span class="welcome">
              您好，{{this.$store.state.username}}
            </span>
            <el-button type="text" @click="logout">退出</el-button>
          </div>
        </el-header>

        <!-- 中间内容部分 -->
        <el-main>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark" style="margin-bottom: 8px;">
                <el-breadcrumb separator-class="el-icon-arrow-right" style="line-height: 36px;">
                  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                  <el-breadcrumb-item :to="{ path: '/users' }">活动管理</el-breadcrumb-item>
                  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                </el-breadcrumb>
              </div>
            </el-col>
            <el-row>
              <el-col :span="6">
                <div>
                  <el-input ref="search_user" v-model="input" placeholder="请输入内容"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <el-button @click="searchUser" type="primary" icon="el-icon-search" style="background: #E5E9F2;border:0px;height:40px;border-top-left-radius: 0px;border-bottom-left-radius: 0px;"></el-button>
                  <el-button type="success" style="margin-left: 0px;" plain @click="dialogFormVisible = true">添加用户</el-button>
                  <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
                    <el-form :model="form" :rules="rules">
                      <el-form-item label="用户名" prop="username"  :label-width="formLabelWidth">
                        <el-input v-model="form.username" auto-complete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="密码" prop="password" :label-width="formLabelWidth">
                        <el-input v-model="form.password" auto-complete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
                        <el-input v-model="form.email" auto-complete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="电话" prop="mo" :label-width="formLabelWidth">
                        <el-input v-model="form.mobile" auto-complete="off"></el-input>
                      </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogFormVisible = false">取 消</el-button>
                      <el-button type="primary" @click="adduser">确 定</el-button>
                    </div>
                  </el-dialog>
                  <!--角色-->
                  <el-dialog title="收货地址" :visible.sync="dialogFormVisible2">
                    <el-form :model="jueseform">
                      <el-form-item label="活动名称" :label-width="formLabelWidth">
                        <el-input v-model="jueseform.name" auto-complete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="活动区域" :label-width="formLabelWidth">
                        <el-select v-model="jueseform.region" placeholder="请选择活动区域">
                          <el-option label="区域一" value="shanghai"></el-option>
                          <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                      <el-button type="primary" @click="checkJuese">确 定</el-button>
                    </div>
                  </el-dialog>
                </div>
              </el-col>
              <el-col><template>
                <el-table
                  :data="userlist"
                  border
                  style="width: 100%">
                  <el-table-column
                    type="index"
                    label="#"
                    width="50">
                  </el-table-column>
                  </el-table-column>
                  <el-table-column
                    prop="username"
                    label="姓名"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="email"
                    label="邮箱">
                  </el-table-column>
                  <el-table-column
                    prop="mobile"
                    label="电话"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="mg_state"
                    label="用户状态"
                    width="180">
                    <template slot-scope="scope">
                      <el-switch
                        @change="changeUserState(scope.row)"
                        v-model="scope.row.mg_state"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                      </el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="user_edit"
                    label="操作">
                    <template slot-scope="scope">
                      <el-button type="primary" plain icon="el-icon-edit"></el-button>
                      <el-button type="primary" plain icon="el-icon-delete"></el-button>
                      <el-button type="primary" plain icon="el-icon-check" @click="dialogFormVisible2=true"></el-button>
                    </template>
                  </el-table-column>
                </el-table></template>
              </el-col>
              <el-col>
                <template>
                  <div class="block" style="background: #D6D6D6;padding-top: 5px;padding-bottom: 5px; ">
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage1"
                      :page-sizes="[2, 4, 6, 8]"
                      :page-size="1"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total">
                    </el-pagination>
                  </div>
                </template>
              </el-col>
            </el-row>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  import axios from 'axios';
  export default {
    data () {
      return {
        isCollapse: false,
        uname:'xxx',
        input:'',
        value2: true,
        currentPage1: 1,
        currentPage2: 2,
        currentPage3: 3,
        currentPage4: 4,
        userlist: [],
        pagenum:1,
        pagesize:2,
        total:100,
        dialogFormVisible: false,
        dialogFormVisible2: false,
        form: {
          username: '',
          password: '',
          email: '',
          mobile: ''
        },
        jueseform:{
          region:''
        },
        formLabelWidth: '120px',
        rules:{
          username:[
            {required:true,message:'请输入username',trigger: 'blur'}
          ],
          password:[
            {required:true,message:'请输入password',trigger: 'blur'}
          ],
          email:[
            {required:true,message:'请输入email',trigger: 'blur'}
          ],
          mobile:[
            {required:true,message:'请输入mobile',trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
        checkJuese(){
            console.log(this.jueseform.region)
        },
      adduser(){
        this.dialogFormVisible = false;
        axios.post('http://localhost:8888/api/private/v1/users', this.form)
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      changeUserState(row){
        axios.put('http://localhost:8888/api/private/v1/users/'+row.id+'/state/'+row.mg_state)
          .then((response)=>{
            if(response.data.meta.status === 200){
                this.$message({type:'success',message:'修改用户状态成功'})
            }else{
              this.$message({type:'warning',message:'修改用户状态失败'})
            }
          })
      },
      searchUser(){
        console.log(this.$refs.search_user.value);//获取到用户名
        axios.get('http://localhost:8888/api/private/v1/users', {
          params: {query: this.$refs.search_user.value, pagenum: 1, pagesize: 1},
        })
          .then((response)=>{
            console.log(response);
            this.userlist = response.data.data.users
          })
          .catch((err)=>{
          })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pagenum = val;
        axios.get('http://localhost:8888/api/private/v1/users', {
          params: {query: '', pagenum: this.pagenum, pagesize: this.pagesize},
        })
          .then((response)=>{
            console.log(response);
            this.userlist = response.data.data.users
          })
          .catch((err)=>{
          })
      },
      handleOpen (key, keyPath) {
//        console.log(key, keyPath)
      },
      handleClose (key, keyPath) {
//        console.log(key, keyPath)
      },
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      },
      logout () {
        // 清除登录状态，即保存在localStorage中的token
        localStorage.removeItem('mytoken')
        // 跳转到登录页面
        this.$router.push({name: 'Login'})
      }
    },
    mounted () {
      axios.interceptors.request.use(function (config) {
          // 将token给到一个前后台约定好的key中，作为请求发送
          let token = localStorage.getItem('mytoken')
          if (token) {
            config.headers['Authorization'] = token
          }
          return config;
        },
        function (error) {
          // Do something with request error
          return Promise.reject(error)
        }
      )

      axios.get('http://localhost:8888/api/private/v1/users', {
        params: {query: '', pagenum: this.pagenum, pagesize: this.pagesize},
//      headers: {
//        'Authorization': localStorage.getItem('mytoken')
//      }
      })
        .then((response)=>{
//        this.$store.state.username = response.data.data.users[0].username;
//          console.log(response);
          this.total = response.data.data.total;
          this.userlist = response.data.data.users;
        })
        .catch((err)=>{
//          console.log(err)
        })

    }
  }
</script>
<style lang="scss" scoped>
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 0px;
    .el-input__inner{
      border-radius: 0px;
    }
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    background: #D6D6D6;
    padding-left:20px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .home {
    height: 100%;
  .el-menu-admin:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-container {
    height: 100vh;
  }
  .el-aside {
    background-color: #545c64;
  }
  .el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #545c64;
  }
  .logo {
    height:60px;
    background: url(../assets/logo.png);
    background-size: cover;
    background-color: #989898;
  }
  .toggle-btn {
    font-size: 36px;
    color: #989898;
    cursor: pointer;
    line-height: 60px;
  }
  .system-title {
    font-size: 28px;
    color: white;
  }
  .welcome, {
    color: white;
  }
  }
</style>
